<template>
  <!-- 高维键 -->
  <div class='container'>
    <el-card>
      <el-row>
        <!-- 表单 -->
        <el-col :span="18">
          <el-form ref="interviewFormRef" :model="interviewForm" label-width="80px" :inline="true">
            <el-form-item label="关键字" prop='keyword'>
              <el-input size="small" v-model="interviewForm.keyword" placeholder="根据文章标题搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select size="small" v-model="interviewForm.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button size="small" type="primary" @click="searchData">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- add新增技巧 -->
        <el-col :span="6">
          <el-button size="small" style="float: right" icon="el-icon-edit" type="success" @click="addSkill">新增技巧
          </el-button>
        </el-col>
      </el-row>
      <!-- 警示框 -->
      <el-alert :title="'数据一共'+counts+'条'" :closable="false" type="info" show-icon>
      </el-alert>
      <!-- 渲染数据表格 -->
      <el-table :data="dataList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="文章标题" width="400">
          <template v-slot='{row}'>
            <span>{{row.title}}</span>
            <i v-if="row.videoURL" class="el-icon-film" @click="openVideo(row)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数">
        </el-table-column>
        <el-table-column prop="username" label="录入人">
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template v-slot='{row}'>
            {{row.createTime | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100">
          <template v-slot="{row}">
            {{row.state===0?'已禁用':'已启用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{row}">
            <el-button type="text" @click="previewData(row)">预览</el-button>
            <el-button type="text" @click="alterState(row)">{{row.state===1?'禁用':'启用'}}</el-button>
            <el-button type="text" :disabled="row.state===1?true:false" @click="changeData(row)">修改</el-button>
            <el-button type="text" :disabled="row.state===1?true:false" @click="deleteData(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float:right;margin:10px 0" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="interviewForm.page" :page-sizes="[5,,10, 20,50]"
        :page-size="interviewForm.pagesize" background :total="counts" layout=" prev, pager, next,sizes, jumper"
        hide-on-single-page=false>
      </el-pagination>
    </el-card>

    <!-- 视频播放 -->
    <el-dialog class="vvv" :visible.sync="dialogVideoVisible" :show-close='false'>
      <video ref="myVideo" :src='vidUrl' autoplay="autoplay"></video>
      <el-button class="closeVideo" icon="el-icon-close" circle @click="closeVideo">
      </el-button>
    </el-dialog>

    <!-- 预览数据 -->
    <Pre ref="preRef" :formBase="oneList"></Pre>

    <!-- 新增技巧 -->
    <Add ref="addRef" :formBase="oneList" @addAdd='adddd'></Add>
  </div>
</template>

<script>
import Add from '../components/articles-add.vue'
import Pre from '../components/articles-preview.vue'
import { list, remove, changeState, detail } from '@/api/hmmm/articles.js'
export default {
  data () {
    return {
      interviewForm: {
        page: 1, // 当前页数
        pagesize: 10, // 每页的数据条数
        keyword: '', // 关键字
        state: null// 状态
      },
      counts: 0,
      dataList: [],
      oneList: {}, // 获取的对象
      dialogVideoVisible: false,
      vidUrl: ''
    }
  },
  created () {
    this.getdataList()
  },
  methods: {
    // 获取列表数据
    async getdataList (val) {
      const { data: res } = await list(val)
      this.counts = res.counts
      this.dataList = res.items
      console.log(res)
    },
    // 搜索
    searchData () {
      this.interviewForm.page = 1
      this.getdataList(this.interviewForm)
    },
    // 清除表单
    resetForm () {
      this.$refs.interviewFormRef.resetFields()
    },
    // 删除数据
    async deleteData (val) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(val)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (error) {
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // this.getdataList()
      this.handleCurrentChange()
    },
    // 修改状态
    alterState (val) {
      val.state = val.state === 0 ? 1 : 0
      changeState(val)
    },
    // 改变每页数据数量
    handleSizeChange (newsize) {
      this.interviewForm.pagesize = newsize
      this.getdataList(this.interviewForm)
    },
    // 改变当前页数
    handleCurrentChange (newpage) {
      this.interviewForm.page = newpage
      this.getdataList(this.interviewForm)
    },
    // 播放视频
    openVideo (val) {
      this.dialogVideoVisible = true
      this.vidUrl = val.videoURL
      console.log(val)
    },
    // 关闭视频
    closeVideo () {
      this.dialogVideoVisible = false
      this.$refs.myVideo.pause()
    },
    // 预览数据
    previewData (val) {
      this.oneList = val
      this.$refs.preRef.dialogFormV()
    },
    // 新增技巧
    addSkill () {
      this.oneList = {}
      this.$refs.addRef.dialogFormV()
    },
    // 新增,修改完成
    adddd () {
      this.getdataList()
    },
    // 修改数据
    async changeData (val) {
      const { data } = await detail(val)
      this.oneList = data
      this.$refs.addRef.dialogFormV()
    }
  },
  components: {
    Pre,
    Add
  }

}
</script>

<style scoped lang='less'>
.el-card {
  margin: 10px 10px;
}
.el-table {
  margin-top: 15px;
}
span {
  margin-right: 10px;
}
i {
  font-size: 18px;
  color: blue;
  cursor: pointer;
}
.vvv {
  video {
    width: 100%;
    height: 100%;
  }
  .closeVideo {
    position: fixed;
    width: 50px;
    height: 50px;
    font-size: 20px;
    background-color: rgba(73, 70, 70, 0.5);
    color: rgb(255, 255, 255);
    border: rgba(73, 70, 70, 0.5);
    top: 50px;
    left: 50%;
  }
  /deep/ .el-dialog__header {
    padding: unset;
  }
  /deep/ .el-dialog__body {
    padding: unset;
  }
}
</style>
